<template >
  <div class="good-1">
    <!-- 筛选框 -->
    <div class="good-top">
      <el-row>
        <el-col :span="8">
          <p>
            商品名称：
            <input type="text" placeholder="输入商品名称，编/条码" />
          </p>
        </el-col>
        <el-col :span="8">
          <span class="demonstration">商品分组：</span>
          <span class="el-dropdown-link">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="demonstration">商品类型：</span>
          <span class="el-dropdown-link">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </el-col>
      </el-row>
      <div class="good-2">
        <el-row>
          <el-col :span="8">
            <p class="text-1">
              销量:
              <input type="text" class="sales" /> -
              <input type="text" class="sales" />
            </p>
          </el-col>
          <el-col :span="8">
            <p class="text-1">
              价格:
              <input type="text" class="sales" /> ——
              <input type="text" class="sales" />
            </p>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">库存：</span>

            <span class="el-dropdown-link">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>
        </el-row>
      </div>

      <div class="good-3">
        <el-radio-group v-model="radio1">
          <el-radio-button label="筛选" class="filt-1"></el-radio-button>
          <el-radio-button label="导出" class="filt-2"></el-radio-button>
          <p class="filt-3">查看已导出列表 重置筛选条件</p>
        </el-radio-group>
      </div>
    </div>

    <div class="good-4">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="热销中" name="second"></el-tab-pane>
      </el-tabs>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="desc" label="描述" width="200"></el-table-column>
        <el-table-column prop="price" label="价格" show-overflow-tooltip></el-table-column>
        <el-table-column prop="img" label="缩略图" show-overflow-tooltip>
          <template slot-scope="scope">
            <img :src="scope.row.img" style="width:50px ;height:50px " alt="111" />
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="action" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    create_time : function() {
      var year = this.create_time.getFullYear(); //取得4位数的年份
      var month = this.create_time.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = this.create_time.getDate(); //返回日期月份中的天数（1到31）
      // var hour = create_time.getHours(); //返回日期中的小时数（0到23）
      // var minute = create_time.getMinutes(); //返回日期中的分钟数（0到59）
      // var second = create_time.getSeconds(); //返回日期中的秒数（0到59）
      return year + "-" + month + "-" + date + " ";
    }
  },
  mounted() {
    this.$http.getGoodList({ hot: false }).then(res => {
      console.log(res);
      this.tableData = res;
    });
  },
  data() {
    return {
      currentPage4: 1,
      params: {
        hot: false
        // page: 1,
        // size: 10
        /* cate:'pet' */
      },
      tableData: [{}],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "全部"
        }
      ],
      value: {},
      radio1: {},
      activeName: "frist"
    };
  },
  watch: {
    activeName(value) {
      if (value == "first") {
        this.params.hot = false;
        this.$http.getGoodList({ hot: false }).then(res => {
          this.tableData = res;
        });
      } else {
        this.params.hot = true;
        this.$http.getGoodList({ hot: true }).then(res => {
          this.tableData = res;
        });
      }
    }
  },
  
  methods: {
    handleDelete(idx) {
      console.log(this.list[idx]._id);
      this.$http
        .delGood({
          id: this.list[idx]._id
        })
        .then(() => {
          this.getGood();
        });
    },
    handleEdit() {
      let data = {
        img: this.img,
        name: this.name,
        desc: this.desc,
        price: this.price,
        cate: this.cate,
        hot: true
      };
      console.log(data);
    },
    handleSizeChange() {},
    handleCurrentChange(value) {
      this.params.page = value;
    },
    handleSelectionChange(val) {
      //当选择项发生变化时会触发该事件
      this.multipleSelection = val;
    }
  }
};
</script>

<style >
.good-top {
  background: #ccc;
  height: 180px;
}
.el-row {
  margin-bottom: 20px;
  padding-top: 10px;
}
.el-col {
  border-radius: 4px;
}
.el-col > p {
  height: auto;
}
.el-col > p > input {
  width: 200px;
  height: 30px;
}
.input-1 {
  width: 200px;
  height: 30px;
}
.el-icon--right {
  margin-left: -20px;
}
.good-2 .sales {
  width: 60px;
  height: 30px;
}
.good-2 .text-1 {
  margin-left: 45px;
}
.good-2 .sales:nth-child(1) {
  margin-left: 12px;
}
.good-3 .filt-1 {
  margin-left: 100px;
}
.good-3 .filt-2 {
  margin-left: 10px;
}
.good-3 .filt-3 {
  color: blue;
  font-size: 14px;
  margin-left: 270px;
  margin-top: -20px;
}
.good-4 .el-tabs {
  margin-top: 30px;
  margin-left: 10px;
}
.good-4 .el-tabs .el-tab-pane {
  background: #ccc;
}
.block {
  text-align: right;
  margin-top: 10px;
}
</style>